<template>
  <section class="rank">
    <div class="rank_top">
      <h1>好大的BUG</h1>
    </div>
    <div class="rank_main">
      <scroll class="rank_list" :data="list">
        <ul>
          <li v-for="value in list">
            我是number{{parseInt(value)}}
          </li>
        </ul>
      </scroll>
    </div>
  </section>
</template>

<style scoped lang="less">
  .rank{
    .rank_top{
      height:2rem;
      h1{
        height:2rem;
        color: red;
        display: flex;
        justify-content: center;
        font-size: 1rem;
        line-height:2rem;
      }
    }
    .rank_main{
      position: fixed;
      top: 3.76rem;
      height:100%;
      .rank_list{
        height:100%;
        width:100%;
        overflow: hidden;
        ul{
          width:100%;
          li{
            display: flex;
            justify-content: center;
            width:7.5rem;
            height:1rem;
            color: red;
            border:1px solid #000;
            line-height:1rem;
          }
        }
      }
    }
  }
  
</style>

<script>
  import scroll from "../base/scroll.vue";
  export default {
    data () {
      return {
        list:{1:134.223,2:2,3:3,4:4,5:5,6:6,7:7,8:8,9:9,10:10,11:11,12:12,13:13,14:14,15:15,16:16,17:17}
      }
    },
    components:{
      scroll
    }
    
  }
</script>
